<template>
  <div class="order-detail wrapper_1200">
    <div class="header">
      <nuxt-link to="/">{{ $t("page.goodsDetail.home") }}></nuxt-link>
      <nuxt-link :to="{ path: '/user', query: { type: 0 } }"
        >{{ $t("page.users.userInfo.personalCenter") }}></nuxt-link
      >
      <span>{{ $t("page.orderDetails.navTitle") }}</span>
    </div>
    <div
      v-if="
        orderData.activity_type == 2 &&
        (orderData.status == 10 || orderData.status == 11)
      "
    >
      <div class="section process">
        <div class="section-hd presell-hd">
          {{ $t("page.users.orderList.Status") }}：
          {{
            orderData.status == 11
              ? $t("page.index.transactionclosed")
              : $t("page.index.balancetobepaid")
          }}
          <div>
            {{ $t("page.index.pleaseat")
            }}{{
              orderData.orderProduct[0].cart_info.productPresell.final_end_time
            }}{{ $t("page.index.tips15") }}
          </div>
        </div>
      </div>
    </div>

    <div v-else>
      <div class="section process" v-if="orderData.status >= 0">
        <div
          class="section-hd"
          v-if="orderData.status === 0 && orderData.order_type == 0"
        >
          {{ $t("page.users.orderList.Status") }}：{{
            $t("page.user.orderStatus[1].name")
          }}
        </div>
        <div class="section-hd" v-if="orderData.status === 1">
          {{ $t("page.users.orderList.Status") }}：{{
            $t("page.user.orderStatus[2].name")
          }}
        </div>
        <div class="section-hd" v-if="orderData.status === 2">
          {{ $t("page.users.orderList.Status") }}：{{
            $t("page.user.orderStatus[3].name")
          }}
        </div>
        <div class="section-hd" v-if="orderData.status === 3">
          {{ $t("page.users.orderList.Status") }}：{{
            $t("page.user.orderStatus[5].name")
          }}
        </div>
        <div class="section-bd">
          <ul class="">
            <li class="past">
              <div class="line"></div>
              <div class="iconfont icon-webicon318"></div>
              <div class="iconfont icon-fukuan">
                <div class="arrow"></div>
              </div>
              <div class="info">
                <div>{{ $t("page.user.orderStatus[0].name") }}</div>
                <div>{{ orderData.create_time }}</div>
              </div>
            </li>
            <li
              :class="{
                past: orderData.status > 0 || orderData.status == -1,
                now: orderData.status == 0 || orderData.status === 9,
              }"
            >
              <div class="line"></div>
              <div
                :class="[
                  'iconfont',
                  orderData.status == 0 ||
                  orderData.status == 9 ||
                  orderData.status >= 1
                    ? 'icon-webicon318'
                    : 'icon-weixuan',
                ]"
              ></div>
              <div class="iconfont icon-peihuo">
                <div class="arrow"></div>
              </div>
              <div class="info">
                <div>{{ $t("page.user.orderStatus[1].name") }}</div>
              </div>
            </li>
            <li
              :class="{
                past: orderData.status > 1 || orderData.status == -1,
                now: orderData.status == 1,
              }"
            >
              <div class="line"></div>
              <div
                :class="[
                  'iconfont',
                  orderData.status > 1 ? 'icon-webicon318' : 'icon-weixuan',
                ]"
              ></div>
              <div class="iconfont icon-fahuo">
                <div class="arrow"></div>
              </div>
              <div class="info">
                <div>{{ $t("page.user.orderStatus[2].name") }}</div>
              </div>
            </li>
            <li
              :class="{
                past: orderData.status > 2 || orderData.status == -1,
                now: orderData.status == 2,
              }"
            >
              <div class="line"></div>
              <div
                :class="[
                  'iconfont',
                  orderData.status >= 2 ? 'icon-webicon318' : 'icon-weixuan',
                ]"
              ></div>
              <div class="iconfont icon-pingjia1">
                <div class="arrow"></div>
              </div>
              <div class="info">
                <div>{{ $t("page.user.orderStatus[3].name") }}</div>
              </div>
            </li>
            <li
              :class="{
                past: orderData.status > 3 || orderData.status == -1,
                now: orderData.status == 3,
              }"
            >
              <div
                :class="[
                  'iconfont',
                  orderData.status == 3 ? 'icon-webicon318' : 'icon-weixuan',
                ]"
              ></div>
              <div class="iconfont icon-wancheng"></div>
              <div class="info">
                <div>{{ $t("page.user.orderStatus[5].name") }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div v-if="orderData.refund_reason" class="section reason">
      <div class="section-hd">
        <span class="iconfont icon-tuikuantishi"></span
        >{{ $t("page.index.merchantrefusestorefund") }}
      </div>
      <div class="section-bd">
        <ul>
          <li class="acea-row">
            <div>{{ $t("page.index.denialreason") }} ：</div>
            <div>
              {{ orderData.refund_reason }}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="section">
      <div class="section-hd">{{ $t("page.goodsAddcart.orderinfo") }}</div>
      <div class="section-bd">
        <ul>
          <li class="acea-row row-middle">
            <div>{{ $t("page.orderPayStatus.orderId") }}：</div>
            <div>{{ orderData.order_sn }}</div>
          </li>
          <li class="acea-row row-middle">
            <div>{{ $t("page.users.orderList.date") }}：</div>
            <div>{{ orderData.create_time }}</div>
          </li>
          <li class="acea-row row-middle">
            <div>{{ $t("page.orderDetails.payStatus") }}：</div>
            <div>{{ $t("page.orderDetails.payTrue") }}</div>
          </li>
          <li class="acea-row row-middle">
            <div>{{ $t("page.orderPayStatus.payType") }}：</div>
            <div v-if="orderData.pay_type == 0">
              {{ $t("page.index.balancepayment") }}
            </div>
            <div v-if="orderData.pay_type == 4 || orderData.pay_type == 5">
              {{ $t("page.index.AliPay") }}
            </div>
            <div
              v-if="
                orderData.pay_type == 1 ||
                orderData.pay_type == 2 ||
                orderData.pay_type == 3 ||
                orderData.pay_type == 6
              "
            >
              {{ $t("page.index.WeChatPay") }}
            </div>
          </li>
          <li v-if="orderData.mark" class="acea-row">
            <div>{{ $t("page.orderDetails.message") }}：</div>
            <div>{{ orderData.mark }}</div>
          </li>
          <li class="acea-row row-middle">
            <div>{{ $t("page.index.orderamount") }}：</div>
            <div class="money">${{ orderData.pay_price }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="section">
      <div class="section-hd">{{ $t("page.users.orderList.formation") }}</div>
      <div class="section-bd">
        <ul>
          <li class="acea-row row-middle">
            <div>{{ $t("page.orderDetails.name") }}：</div>
            <div>{{ orderData.real_name }}</div>
          </li>
          <li class="acea-row row-middle">
            <div>{{ $t("page.store.storePhone") }}：</div>
            <div>{{ orderData.user_phone }}</div>
          </li>
          <li class="acea-row">
            <div>{{ $t("page.orderDetails.address") }}：</div>
            <div>{{ orderData.user_address }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="section order-number">
      <div class="section-bd" v-if="orderData.delivery_type === '2'">
        <ul>
          <li class="acea-row row-middle">
            <div>{{ $t("page.orderDetails.sendMethod") }}</div>
            <div>{{ $t("page.orderDetails.sendTwo") }}</div>
          </li>
          <li class="acea-row row-middle">
            <div>{{ $t("page.index.deliveryman") }}：</div>
            <div>{{ orderData.delivery_name || "" }}</div>
          </li>
          <li class="acea-row">
            <div>{{ $t("page.store.storePhone") }}：</div>
            <div>{{ orderData.delivery_id || "" }}</div>
          </li>
        </ul>
      </div>
      <div
        class="section-bd"
        v-else-if="orderData.delivery_type === 'fictitious'"
      >
        <ul>
          <li class="acea-row row-middle">
            <div>{{ $t("page.index.virtualshipment") }}：</div>
            <div>{{ $t("page.index.hasbeenshipped") }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="section">
      <div v-if="orderData.merchant" class="section-hd" @click="goChat">
        <span class="mer_name">{{ orderData.merchant.mer_name }}</span>
        <div class="orderBnt">
          {{ $t("page.user.contact") }}
          <span class="iconfont icon-lianxikefu"></span>
          <!-- <div class="qrcode">
            <client-only>
              <vue-qr
                :text="
                  $store.state.domain +
                  'pages/chat/customer_list/chat?mer_id=' +
                  orderData.mer_id +
                  '&order_id=' +
                  orderData.order_id
                "
                :size="200"
                :margin="6"
              ></vue-qr>
            </client-only>
          </div> -->
        </div>
      </div>
    </div>
    <div class="section-bd">
      <ul class="goods">
        <li v-for="(item, index) in orderData.orderProduct" :key="index">
          <div v-if="orderData.activity_type == 2">
            <div class="acea-row row-middle">
              <div class="img-box">
                <img
                  :src="
                    (item.cart_info.productAttr &&
                      item.cart_info.productAttr.image) ||
                    item.cart_info.product.image
                  "
                />
                <span>{{ $t("page.index.presale") }}</span>
              </div>
              <div class="store-box">
                <div class="name line2">
                  {{ item.cart_info.product.store_name }}
                </div>
                <div class="info" v-if="item.cart_info.productAttr.sku">
                  {{ item.cart_info.productAttr.sku }}
                </div>
                <div class="money_count">
                  <span class="money"
                    >${{
                      item.cart_info.productPresellAttr.presell_price
                    }}</span
                  >
                </div>
                <div
                  v-if="
                    orderData.status === 0 ||
                    orderData.status === 10 ||
                    orderData.status === 11
                  "
                  class="develity_date"
                >
                  <!--全款预售-->
                  <span
                    v-if="item.cart_info.productPresell.presell_type === 1"
                  >
                    {{ $t("page.index.deliverytime") }}：{{
                      item.cart_info.productPresell.delivery_type === 1
                        ? $t("page.index.asuccessfulpay")
                        : $t("page.index.resaleends")
                    }}{{ item.cart_info.productPresell.delivery_day
                    }}{{ $t("page.index.days") }}
                  </span>
                  <!--定金预售-->
                  <span
                    v-if="item.cart_info.productPresell.presell_type === 2"
                  >
                    {{ $t("page.index.deliverytime") }}：{{
                      item.cart_info.productPresell.delivery_type === 1
                        ? $t("page.index.afterpayingthebalance")
                        : $t("page.index.resaleends")
                    }}{{ item.cart_info.productPresell.delivery_day
                    }}{{ $t("page.index.days") }}
                  </span>
                </div>
              </div>
              <div class="presell_num">
                <span>x{{ item.product_num }}</span>
              </div>
              <div class="operate_btn">
                <div
                  class="refund_btn"
                  v-if="
                    item.is_refund == 0 &&
                    orderData.status != 10 &&
                    orderData.status != 11 &&
                    orderData.refund_status
                  "
                >
                  <el-button size="mini" @click="refund(item)">{{
                    $t("page.orderDetails.refund")
                  }}</el-button>
                </div>
                <div class="refund_btn" v-if="item.is_refund == 1">
                  <span>{{ $t("page.users.userReturnList.refunding") }}</span>
                </div>
                <div class="refund_btn" v-if="item.is_refund > 1">
                  <span>{{ $t("page.users.userReturnList.refunded") }}</span>
                </div>
                <div
                  class="evaluate_btn"
                  v-if="item.is_reply == 0 && orderData.status == 2"
                >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="goEvaluate(item)"
                    >{{ $t("page.index.evaluation") }}</el-button
                  >
                </div>
              </div>
            </div>
            <div v-if="orderData.status >= 10" class="presell_process">
              <div class="process_count">
                <div class="acea-row row-between">
                  <div>
                    {{ $t("page.index.stage1") }}：{{
                      $t("page.index.thebuyerhaspaid")
                    }}
                  </div>
                  <div class="font-color">${{ orderData.pay_price }}</div>
                </div>
                <div class="acea-row row-between mt10">
                  <div>
                    {{ $t("page.index.stage2") }}：
                    <span
                      v-if="
                        orderData.status == 10 &&
                        orderData.presellOrder.activeStatus == 0
                      "
                      >{{ $t("page.index.notstarted") }}</span
                    >
                    <span
                      v-if="
                        orderData.status == 10 &&
                        orderData.presellOrder.activeStatus == 1
                      "
                      >{{ $t("page.index.paybalance") }}</span
                    >
                    <span
                      v-if="
                        orderData.status == 11 ||
                        orderData.presellOrder.activeStatus == 2
                      "
                      >{{ $t("page.index.transactionclosed") }}</span
                    >
                  </div>
                  <div class="font-color" style="margin-top: 0">
                    ${{ orderData.presellOrder.pay_price }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="acea-row row-middle">
            <div class="img-box">
              <img
                :src="
                  (item.cart_info.productAttr &&
                    item.cart_info.productAttr.image) ||
                  item.cart_info.product.image
                "
              />
            </div>
            <div class="store-box">
              <!-- <div class="name line2">
                {{ item.cart_info.product.store_name }}
              </div> -->
              <div class="name line2" v-if="types == 'one'||types == undefined">{{item.cart_info.product.store_name_en}}</div>
              <div class="name line2" v-if="types == 'two'">{{item.cart_info.product.store_name}}</div>
              <div class="name line2" v-if="types == 'three'">{{item.cart_info.product.store_name_tw}}</div>
              <div class="name line2" v-if="types == 'four'">{{item.cart_info.product.store_name_th}}</div>
              <div class="name line2" v-if="types == 'five'">{{item.cart_info.product.store_name_ja}}</div>
              <div class="name line2" v-if="types == 'six'">{{item.cart_info.product.store_name_vi}}</div>
              <div class="name line2" v-if="types == 'seven'">{{item.cart_info.product.store_name_id}}</div>
              <div class="name line2" v-if="types == 'eight'">{{item.cart_info.product.store_name_hi}}</div>
              <div class="name line2" v-if="types == 'nine'">{{item.cart_info.product.store_name_tr}}</div>
              <div class="name line2" v-if="types == 'ten'">{{item.cart_info.product.store_name_ar}}</div>
              <div class="name line2" v-if="types == 'eleven'">{{item.cart_info.product.store_name_ko}}</div>
              <div class="info" v-if="item.cart_info.productAttr.sku">
                {{ item.cart_info.productAttr.sku }}
              </div>
              <div class="money_count">
                <span class="money"
                  >${{ item.cart_info.productAttr.price }}</span
                >
                <span>x{{ item.product_num }}</span>
              </div>
            </div>
            <div class="operate_btn">
              <div
                class="refund_btn"
                v-if="
                  item.is_refund == 0 &&
                  orderData.status != 9 &&
                  orderData.refund_status
                "
              >
                <el-button size="mini" @click="refund(item)">{{
                  $t("page.orderDetails.refund")
                }}</el-button>
              </div>
              <div class="refund_btn" v-if="item.is_refund == 1">
                <span>{{ $t("page.users.userReturnList.refunding") }}</span>
              </div>
              <div class="refund_btn" v-if="item.is_refund > 1">
                <span>{{ $t("page.users.userReturnList.refunded") }}</span>
              </div>
              <div
                class="evaluate_btn"
                v-if="item.is_reply == 0 && orderData.status == 2"
              >
                <el-button
                  type="primary"
                  size="mini"
                  @click="goEvaluate(item)"
                  >{{ $t("page.index.evaluation") }}</el-button
                >
              </div>
            </div>
          </div>
        </li>
      </ul>
      <!---->
      <ul>
        <li class="acea-row row-middle">
          <div>{{ $t("page.orderDetails.freight") }}：</div>
          <div>
            {{
              orderData.pay_postage <= 0
                ? $t("page.goodsAddcart.freeshipping")
                : orderData.pay_postage
            }}
          </div>
        </li>
        <li v-if="orderData.coupon_id" class="acea-row row-middle coupon">
          <div>{{ $t("page.index.discountedprice") }}</div>
          <div>
            <span>-${{ orderData.coupon_price }}</span>
          </div>
        </li>
        <li class="acea-row row-middle coupon">
          <div>{{ $t("page.orderDetails.point") }}：</div>
          <div>
            <span>-${{ orderData.integral_price }}</span>
          </div>
        </li>
      </ul>
      <ul class="total">
        <li class="acea-row row-middle row-between">
          <div>
            共{{ orderData.total_num }}{{ $t("page.orderDetails.item") }}
            {{ $t("page.users.orderList.totalPay") }} ：<span class="money"
              >$<b>{{ orderData.pay_price }}</b></span
            >
          </div>
          <div class="footerState acea-row row-middle">
            <nuxt-link
              class="orderBnt"
              :to="{
                path: '/logistics',
                query: { orderId: orderData.order_id },
              }"
              v-if="
                (orderData.status == 1 || orderData.status == 2) &&
                orderData.delivery_type == 1 &&
                orderData.activity_type != 2
              "
              >{{ $t("page.orderDetails.logistics") }}</nuxt-link
            >
            <el-button
              v-if="
                refundNum.length != cartInfo.length && orderData.refund_status
              "
              class="orderBnt"
              @click="allRefund"
              >{{ $t("page.orderDetails.refund") }}</el-button
            >
            <div
              class="orderBnt"
              :class="{
                on: orderData.status === 1,
              }"
              v-if="orderData.status === 1"
              @click="confirmOrder"
            >
              {{ $t("page.orderDetails.confirm") }}
            </div>
            <div
              class="orderBnt"
              v-if="orderData.status === 4"
              @click="delOrder"
            >
              {{ $t("page.orderDetails.delete") }}
            </div>
            <div
              class="orderBnt"
              v-if="
                orderData.activity_type != 2 &&
                orderData.activity_type != 3 &&
                (orderData.status === 3 || orderData.status === 2)
              "
              @click="goOrderConfirm"
            >
              {{ $t("page.orderDetails.again") }}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <ChatItem 
      v-if="$auth.loggedIn"
      :dialogVisible="chatVisible" 
      :title="orderData.merchant.mer_name" 
      :mer_id="orderData.mer_id"
      :uid="$auth.user.uid"
      :pOrderId="orderData.order_id"
      @close="chatVisible = false" />
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
// +----------------------------------------------------------------------
import { Message, MessageBox } from "element-ui";
import ChatItem from "@/components/chat";
export default {
  auth: "guest",
  components: { ChatItem },
  data() {
    return {
      types:'',
      chatVisible:false,
      orderData: {},
      goodsNum: 0,
      refundNum: [],
      cartInfo: [],
    };
  },
  async asyncData({ app, query }) {
    let [orderData] = await Promise.all([
      app.$axios.get(`/api/order/detail/${query.orderId}`),
    ]);
    return {
      orderData: orderData.data,
      cartInfo: orderData.data.orderProduct,
    };
  },
  fetch({ store }) {
    store.commit("isBanner", false);
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title:
        this.$t("page.orderDetails.navTitle") +
        "-" +
        this.$store.state.titleCon,
    };
  },
  beforeMount() {
    let that = this,
      num = 0;
    that.cartInfo.map((el) => {
      if (el.refund_num == 0) {
        that.refundNum.push(el);
      }
    });
    that.goodsNum = num;
  },
  mounted() {
    this.types = this.$cookies.get("type");
    },
  methods: {
    goChat(){
      if(this.$auth.loggedIn) {
        this.chatVisible = true
      } else {
        this.$message.error(this.$t("page.chat.loginHit"))
      }
    },
    getOrderInfo() {
      this.$axios
        .get(`/api/order/detail/${this.orderData.order_id}`)
        .then((res) => {
          this.orderData = res.data;
        });
    },
    // 取消订单
    cancelOrder() {
      let that = this;
      MessageBox.confirm(
        this.$t("page.index.surecancelorder"),
        this.$t("message.login.prompt")
      ).then((res) => {
        that.$axios
          .post("/api/order/cancel", {
            id: that.orderData.order_id,
          })
          .then((data) => {
            Message.success(data.message);
            that.$router.replace({
              path: "/user/order_list",
              query: { type: 1 },
            });
          });
      });
    },
    //去支付
    goPay() {
      this.$router.push({
        path: "/payment",
        query: { result: this.orderData.order_id },
      });
    },
    //确认收货
    confirmOrder() {
      let that = this;
      MessageBox.confirm(
        this.$t("page.index.tips3"),
        this.$t("message.login.prompt")
      ).then((res) => {
        that.$axios
          .post("/api/order/take/" + that.orderData.order_id)
          .then((data) => {
            Message.success(this.$t("message.login.operationSU"));
            that.getOrderInfo();
          });
      });
    },
    //删除订单
    delOrder() {
      let that = this;
      MessageBox.confirm(
        this.$t("page.index.suredeleteorder"),
        this.$t("message.login.prompt")
      ).then((res) => {
        that.$axios
          .post("/order/del", {
            uni: that.orderData.order_id,
          })
          .then((data) => {
            Message.success(this.$t("message.login.delSU"));
            that.$router.replace({
              path: "/user/order_list",
              query: { type: 1 },
            });
          });
      });
    },
    //  再次购买
    goOrderConfirm() {
      let that = this;
      let data = [];
      this.cartInfo.map((item, index) => {
        let obj = {};
        obj.product_id = item.product_id;
        obj.product_attr_unique = item.product_sku;
        obj.cart_num = item.product_num;
        data.push(obj);
      });
      that.$axios
        .post("/api/user/cart/again", { data: data })
        .then((res) => {
          let cart_id = res.data.cart_id.join(",");
          that.$router.replace({
            path: "/order_confirm",
            query: { new: 1, cartId: cart_id },
          });
        })
        .catch((err) => {
          that.$message.error(err);
        });
    },
    //  去评价
    goEvaluate(item) {
      this.$router.push({
        path: "/evaluation",
        query: {
          unique: item.order_product_id,
          order_id: this.orderData.order_id,
        },
      });
    },
    //批量退款
    allRefund() {
      if (this.orderData.status == 0) {
        this.$router.push({
          path: "/refund",
          query: {
            orderId: this.orderData.order_id,
            refund_type: 1,
            type: 2,
          },
        });
      } else {
        this.$router.push({
          path: "/user/refund_select",
          query: {
            orderId: this.orderData.order_id,
            type: 2,
          },
        });
      }
    },
    //退款
    refund(item) {
      if (this.orderData.status == 0 || this.orderData.status == 9) {
        this.$router.push({
          path: "/refund_confirm",
          query: {
            orderId: this.orderData.order_id,
            type: 1,
            ids: item.order_product_id,
            refund_type: 1,
          },
        });
      } else {
        this.$router.push({
          path: "/user/refund_select",
          query: {
            orderId: this.orderData.order_id,
            type: 1,
            ids: item.order_product_id,
          },
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.order-detail {
  .header {
    height: 60px;
    line-height: 60px;
    color: #999999;
    background-color: unset;
    .home {
      color: #282828;
    }
  }
  > div {
    background-color: #ffffff;
    .process {
      margin-top: 0;
      div {
        border-top: none;
        &.section-hd {
          padding: 26px 22px 0;
        }

        ul {
          padding: 27px 0 94px;
          &::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
          }
        }
        li {
          position: relative;
          float: left;
          margin-top: 0;
          margin-left: 222px;
          &:first-child {
            margin-left: 111px;
          }
          .line {
            position: absolute;
            top: 50%;
            left: 16px;
            width: 226px;
            height: 4px;
            background: #c7c7c7;
            transform: translateY(-50%);
          }
          .iconfont {
            position: relative;
            width: auto;
            font-size: 18px;
            line-height: 1;
            color: #c7c7c7;
            + .iconfont {
              position: absolute;
              top: 50%;
              left: 50%;
              display: none;
              width: 40px;
              height: 40px;
              border: 4px solid #e93323;
              border-radius: 50%;
              background: #ffffff;
              transform: translate(-50%, -50%);
              font-size: 20px;
              line-height: 32px;
              text-align: center;
              color: #e93323;
            }
          }
          .arrow {
            position: absolute;
            top: 50%;
            left: 100%;
            display: none;
            width: 80px;
            height: 16px;
            background: #e93323;
            transform: translateY(-50%);
            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 100%;
              border-width: 8px;
              border-style: solid;
              border-color: transparent transparent transparent #e93323;
            }
          }
          .info {
            position: absolute;
            top: 42px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            text-align: center;
            color: #9a9a9a;
            width: 100px;
            div {
              &:first-child {
                margin-bottom: 4px;
                font-size: 16px;
                color: #282828;
              }
            }
          }
          &.past {
            .line {
              background: rgba(233, 51, 35, 0.6);
            }
            .iconfont {
              color: #e93323;
              font-weight: bold;
              font-size: 22px;
              left: -3px;
            }
          }
          &.now {
            .info {
              div {
                &:first-child {
                  color: #e93323;
                }
              }
            }
            .iconfont {
              + .iconfont {
                display: block;
              }
            }
            .arrow {
              display: block;
            }
          }
        }
      }
    }
    &.order-number {
      li {
        div {
          &:nth-child(2) {
            flex: none;
          }
        }
        a {
          margin-left: 30px;
          font-size: 16px;
          color: #236fe9;

          .iconfont {
            font-size: 12px;
          }
        }
      }
    }
    ~ div {
      margin-top: 14px;
    }
    > div {
      ~ div {
        border-top: 1px dashed #cecece;
      }
    }
    .presell-hd {
      div {
        margin-top: 20px;
      }
    }

    &.reject {
      position: relative;
      padding: 30px 22px;
      background: #666666;
      overflow: hidden;
      margin-top: 0;
      .iconfont {
        position: absolute;
        top: -20px;
        right: 28px;
        font-size: 112px;
        color: #818181;
      }
      div {
        border-top: none;
        &.section-hd {
          padding: 0;
          font-weight: bold;
          color: #ffffff;
        }
        ul {
          padding: 0;
          margin-top: 8px;
          font-size: 14px;
          color: #ffffff;
        }
      }
    }
    &.reason {
      padding: 26px 22px;
      div {
        border-top: none;
        &.section-hd {
          padding: 0;
          .iconfont {
            margin-right: 8px;
          }
        }
        ul {
          padding: 0;
          margin-top: 15px;
          color: #7e7e7e;
        }
      }
    }
  }
  .section-hd {
    padding: 18px 22px;
    font-size: 18px;
    color: #282828;
    position: relative;
    .qrcode {
      box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.08);
      background: #fff;
      position: absolute;
      right: 0;
      top: 30px;
      z-index: 10;
      display: none;
      padding: 6px;
      img {
        width: 100%;
        display: block !important;
      }
    }
    .orderBnt {
      color: #e93323;
      font-size: 18px;
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;
      &:hover {
        .qrcode {
          display: block;
        }
      }
      .iconfont {
        font-size: 20px;
      }
    }
  }
  .section-bd {
    ul {
      padding: 22px;
      font-size: 16px;
      color: #282828;
      ~ ul {
        border-top: 1px dashed #cecece;
      }
    }
    li {
      .time {
        margin-left: 10px;
      }
      ~ li {
        margin-top: 20px;
      }

      &.coupon {
        span {
          ~ span {
            margin-left: 18px;
          }
        }
      }
    }
    .money {
      color: #e93323;
      b {
        font-weight: normal;
        font-size: 22px;
      }
    }
    .goods {
      .info {
        font-size: 12px;
        color: #aaa;
        margin-top: 4px;
      }
      li {
        position: relative;
        ~ li {
          margin-top: 22px;
        }
        > div {
          .img-box {
            width: 86px;
            height: 86px;
            overflow: hidden;
            margin-right: 26px;
            position: relative;
            span {
              display: block;
              width: 100%;
              text-align: center;
              font-size: 12px;
              line-height: 18px;
              background: rgba(0, 0, 0, 0.5);
              position: absolute;
              left: 0;
              bottom: 0;
              color: #fff;
            }
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          del {
            margin-left: 12px;
            font-size: 14px;
            color: #919191;
          }
        }
        .money_count {
          margin-top: 4px;
          color: #b1b1b1;
        }
        .store-box {
          width: 700px;
          .name {
            max-width: 500px;
          }
        }
        .presell_num {
          color: #b1b1b1;
        }
      }
      .develity_date {
        color: #fd6523;
        font-size: 12px;
      }
    }
    .total {
      padding: 28px 22px;
      .footerState {
        cursor: pointer;
      }
      .service {
        width: 114px;
        height: 40px;
        margin-left: 18px;
        background: #e93323;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
      div {
        &:first-child {
          width: auto;
        }
        &:last-child {
          flex: none;
          div {
            padding-right: 30px;
            padding-left: 30px;
            ~ div {
              border-left: 1px solid #cecece;
            }
          }
          .orderBnt {
            width: 114px;
            height: 40px;
            padding: 0;
            border: 1px solid #999999;
            border-radius: 2px;
            background: none;
            outline: none;
            font-size: 16px;
            line-height: 40px;
            text-align: center;
            color: #282828;
            cursor: pointer;
            ~ .orderBnt {
              margin-left: 18px;
            }
            &.on {
              border-color: #e93323;
              background: #e93323;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}

.operate_btn {
  display: flex;
  position: absolute;
  right: 0;
  color: #b1b1b1;
  align-items: center;
}
.presell_process {
  margin-top: 20px;
  .process_count {
    background: #fff8f7;
    padding: 21px 20px;
    > div {
      color: #282828;
      width: 60%;
    }
  }
  .mt10 {
    margin-top: 10px;
  }
}
.evaluate_btn {
  margin-left: 15px;
}
</style>
